.field-selector-menu-button {
    width: 100%;
    height: 40px;
    justify-content: start;
    border: none;
    font-weight: normal;
    
    &:hover {
        background: rgba(var(--center-channel-color-rgb), 0.04);
    }
    
    &:focus,
    &[aria-expanded="true"] {
        background: rgba(var(--button-bg-rgb), 0.08);
    }

    &.disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    > span > span:first-child:not([style*="flex-wrap: wrap"]) {
        overflow: hidden;
        padding-inline-start: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.value-selector-menu-button {
    &__multi-values-container {
        display: flex;
        overflow: hidden;
        flex-grow: 1;
        flex-wrap: wrap;
        gap: 2px;
    }

    &__inner-wrapper {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
}

.values-editor {
    width: 100%;
    
    .select__multi-value {
        display: flex;
        height: 24px;
        align-items: center;
        border-radius: 4px;
        margin: 2px;
        background-color: rgba(var(--center-channel-color-rgb), 0.08);
    }
    
    .select__multi-value__label {
        padding: 0 4px 0 8px;
        font-size: 12px;
    }
    
    .select__multi-value__remove {
        padding: 0 4px;
        cursor: pointer;
        
        &:hover {
            background-color: rgba(var(--center-channel-color-rgb), 0.16);
        }
    }

    &__simple-input {
        width: 100%;
        height: 40px;
        border: none;
        background: transparent;
        font-size: 14px;
        padding-inline-start: 22px;

        &:focus {
            background: rgba(var(--center-channel-color-rgb), 0.06);
            outline: none;
        }

        &:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }
    }

    .MenuItem__trailing-elements {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}
